<template>
  <div class="portrait-cytoscape">
    <div class="yuanp9" v-if="yuanpanshow==9">

      <span @mouseover="mouseOver(1)" @mouseleave="mouseLeave" @click="selectMenu=0;$emit('cytoscapeclick', 0);" title="基本信息"></span>
      <span @mouseover="mouseOver(2)" @mouseleave="mouseLeave" @click="selectMenu=6;$emit('cytoscapeclick', 6);" title="告警预警"></span>
      <span @mouseover="mouseOver(3)" @mouseleave="mouseLeave" @click="selectMenu=2;$emit('cytoscapeclick', 2);" title="深度洞察"></span>
      <span @mouseover="mouseOver(4)" @mouseleave="mouseLeave" @click="selectMenu=4;$emit('cytoscapeclick', 4);" title="业务路径"></span>
      <span @mouseover="mouseOver(5)" @mouseleave="mouseLeave" @click="selectMenu=5;$emit('cytoscapeclick', 5);" title="故障回溯"></span>
      <span @mouseover="mouseOver(6)" @mouseleave="mouseLeave" @click="selectMenu=3;$emit('cytoscapeclick', 3);" title="趋势预测"></span>
      <span @mouseover="mouseOver(7)" @mouseleave="mouseLeave" @click="selectMenu=7;$emit('cytoscapeclick', 7);" title="用户体验"></span>
      <span @mouseover="mouseOver(8)" @mouseleave="mouseLeave" @click="selectMenu=10;$emit('cytoscapeclick', 10);" title="报表"></span>
      <span @mouseover="mouseOver(9)" @mouseleave="mouseLeave" @click="selectMenu=9;$emit('cytoscapeclick', 9);" title="KPI"></span>
      <a :class="selectMenu==0 ||activeMenu==1?`active icon91`:`icon91`  "></a>
      <a :class="selectMenu==6 ||activeMenu==2?`active  icon92`:`icon92` "></a>
      <a :class="selectMenu==2 ||activeMenu==3?`active  icon93`:`icon93` "></a>
      <a :class="selectMenu==4 ||activeMenu==4?`active icon94`:`icon94`  "></a>
      <a :class="selectMenu==5 ||activeMenu==5?`active  icon95`:`icon95` "></a>
      <a :class="selectMenu==3 ||activeMenu==6?`active  icon96`:`icon96` "></a>
      <a :class="selectMenu==7 ||activeMenu==7?`active icon97`:`icon97`  "></a>
      <a :class="selectMenu==10 ||activeMenu==8?`active  icon98`:`icon98` "></a>
      <a :class="selectMenu==9 ||activeMenu==9?`active  icon99`:`icon99` "></a>
      <h1 @click="yuanpanshow=-1"></h1>
    </div>

    <div class="yuanp" v-if="yuanpanshow==1">

      <span @mouseover="mouseOver(1)" @mouseleave="mouseLeave" @click="selectMenu=0;$emit('cytoscapeclick', 0);" title="基本信息"></span>
      <span @mouseover="mouseOver(2)" @mouseleave="mouseLeave" @click="selectMenu=6;$emit('cytoscapeclick', 6);" title="告警预警"></span>
      <span @mouseover="mouseOver(3)" @mouseleave="mouseLeave" @click="selectMenu=2;$emit('cytoscapeclick', 2);" title="深度洞察"></span>
      <span @mouseover="mouseOver(4)" @mouseleave="mouseLeave" @click="selectMenu=5;$emit('cytoscapeclick', 5);" title="故障回溯"></span>
      <span @mouseover="mouseOver(5)" @mouseleave="mouseLeave" @click="selectMenu=3;$emit('cytoscapeclick', 3);" title="趋势预测"></span>
      <span @mouseover="mouseOver(6)" @mouseleave="mouseLeave" @click="selectMenu=10;$emit('cytoscapeclick', 10);" title="报表"></span>
      <span @mouseover="mouseOver(7)" @mouseleave="mouseLeave" @click="selectMenu=9;$emit('cytoscapeclick', 9);" title="KPI"></span>
      <a :class="selectMenu==0 ||activeMenu==1?`active icon0`:`icon0`  "></a>
      <a :class="selectMenu==6 ||activeMenu==2?`active  icon6`:`icon6` "></a>
      <a :class="selectMenu==2 ||activeMenu==3?`active  icon2 `:`icon2` "></a>
      <a :class="selectMenu==5 ||activeMenu==4?`active  icon5 `:`icon5` "></a>
      <a :class="selectMenu==3 || activeMenu==5?`active icon7 `:`icon7`"></a>
      <a :class="selectMenu==10 ||activeMenu==6?`active  icon4 `:`icon4` "></a>
      <a :class="selectMenu==9 ||activeMenu==7?`active  icon10 `:`icon10`  "></a>
      <h1 @click="yuanpanshow=-1"></h1>
    </div>

    <div class="yuanp" v-if="yuanpanshow==2">

      <span @mouseover="mouseOver(1)" @mouseleave="mouseLeave" @click="selectMenu=0;$emit('cytoscapeclick', 0);" title="基本信息"></span>
      <span @mouseover="mouseOver(2)" @mouseleave="mouseLeave" @click="selectMenu=6;$emit('cytoscapeclick', 6);" title="告警预警"></span>
      <span @mouseover="mouseOver(3)" @mouseleave="mouseLeave" @click="selectMenu=2;$emit('cytoscapeclick', 2);" title="深度洞察"></span>
      <span @mouseover="mouseOver(4)" @mouseleave="mouseLeave" @click="selectMenu=5;$emit('cytoscapeclick', 5);" title="故障回溯"></span>
      <span @mouseover="mouseOver(5)" @mouseleave="mouseLeave" @click="selectMenu=7;$emit('cytoscapeclick', 7);" title="用户体验"></span>
      <span @mouseover="mouseOver(6)" @mouseleave="mouseLeave" @click="selectMenu=10;$emit('cytoscapeclick', 10);" title="报表"></span>
      <span @mouseover="mouseOver(7)" @mouseleave="mouseLeave" @click="selectMenu=4;$emit('cytoscapeclick', 4);" title="业务路径"></span>
      <a :class="selectMenu==0 ||activeMenu==1?`active icon0`:`icon0`  "></a>
      <a :class="selectMenu==6 ||activeMenu==2?`active  icon6`:`icon6` "></a>
      <a :class="selectMenu==2 ||activeMenu==3?`active  icon2 `:`icon2` "></a>
      <a :class="selectMenu==5 ||activeMenu==4?`active  icon5 `:`icon5` "></a>
      <a :class="selectMenu==7 || activeMenu==5?`active icon7 icon11 `:`icon7 icon11`"></a>
      <a :class="selectMenu==10 ||activeMenu==6?`active  icon4 `:`icon4` "></a>
      <a :class="selectMenu==4 ||activeMenu==7?`active  icon10 icon12 `:`icon10 icon12`  "></a>
      <h1 @click="yuanpanshow=-1"></h1>
    </div>
    <div class="yuanp3" v-if="yuanpanshow==3">

      <span @mouseover="mouseOver(1)" @mouseleave="mouseLeave" @click="selectMenu=0;$emit('cytoscapeclick', 0);" title="基本信息"></span>
      <span @mouseover="mouseOver(2)" @mouseleave="mouseLeave" @click="selectMenu=6;$emit('cytoscapeclick', 6);" title="告警预警"></span>
      <span @mouseover="mouseOver(3)" @mouseleave="mouseLeave" @click="selectMenu=9;$emit('cytoscapeclick', 9);" title="KPI"></span>
      <a :class="selectMenu==0 ||activeMenu==1?`active icon31`:`icon31`  "></a>
      <a :class="selectMenu==6 ||activeMenu==2?`active  icon32`:`icon32` "></a>
      <a :class="selectMenu==9 ||activeMenu==3?`active  icon33`:`icon33` "></a>
      <h1 @click="yuanpanshow=-1"></h1>
    </div>
    <div class="yuanp4" v-if="yuanpanshow==4">

      <span @mouseover="mouseOver(1)" @mouseleave="mouseLeave" @click="selectMenu=0;$emit('cytoscapeclick', 0);" title="基本信息"></span>
      <span @mouseover="mouseOver(2)" @mouseleave="mouseLeave" @click="selectMenu=6;$emit('cytoscapeclick', 6);" title="告警预警"></span>
      <span @mouseover="mouseOver(3)" @mouseleave="mouseLeave" @click="selectMenu=2;$emit('cytoscapeclick', 2);" title="深度洞察"></span>
      <span @mouseover="mouseOver(4)" @mouseleave="mouseLeave" @click="selectMenu=5;$emit('cytoscapeclick', 5);" title="故障回溯"></span>
      <a :class="selectMenu==0 ||activeMenu==1?`active icon41`:`icon41`  "></a>
      <a :class="selectMenu==6 ||activeMenu==2?`active  icon42`:`icon42` "></a>
      <a :class="selectMenu==2 ||activeMenu==3?`active  icon43`:`icon43` "></a>
      <a :class="selectMenu==5 ||activeMenu==4?`active  icon44`:`icon44` "></a>
      <h1 @click="yuanpanshow=-1"></h1>
    </div>
    <div class="yuanp6" v-if="yuanpanshow==6">
      <span @mouseover="mouseOver(1)" @mouseleave="mouseLeave" @click="selectMenu=0;$emit('cytoscapeclick', 0);" title="基本信息"></span>
      <span @mouseover="mouseOver(2)" @mouseleave="mouseLeave" @click="selectMenu=6;$emit('cytoscapeclick', 6);" title="告警预警"></span>
      <span @mouseover="mouseOver(3)" @mouseleave="mouseLeave" @click="selectMenu=2;$emit('cytoscapeclick', 2);" title="深度洞察"></span>
      <span @mouseover="mouseOver(4)" @mouseleave="mouseLeave" @click="selectMenu=3;$emit('cytoscapeclick', 3);" title="趋势预测"></span>
      <span @mouseover="mouseOver(5)" @mouseleave="mouseLeave" @click="selectMenu=10;$emit('cytoscapeclick', 10);" title="报表"></span>
      <span @mouseover="mouseOver(6)" @mouseleave="mouseLeave" @click="selectMenu=9;$emit('cytoscapeclick', 9);" title="KPI"></span>
      <a :class="selectMenu==0 ||activeMenu==1?`active icon61`:`icon61`  "></a>
      <a :class="selectMenu==6 ||activeMenu==2?`active  icon62`:`icon62` "></a>
      <a :class="selectMenu==2 ||activeMenu==3?`active  icon63 `:`icon63` "></a>
      <a :class="selectMenu==3 ||activeMenu==4?`active  icon64 `:`icon64` "></a>
      <a :class="selectMenu==10 || activeMenu==5?`active icon65 `:`icon65 `"></a>
      <a :class="selectMenu==9 ||activeMenu==6?`active  icon66 `:`icon66` "></a>
      <h1 @click="yuanpanshow=-1"></h1>
    </div>
    <div class="cytoscape" ref="cytoscape"></div>
    <div class="slider">
      <el-slider v-model="cytoscapezoom" vertical="" height="120px">
      </el-slider>
    </div>
    <div class="pngview">
      <img src="" alt="" id="png-eg" />
    </div>

  </div>
</template>
<script>
let cy = null;
export default {
  name: "Cytoscape",
  props: ["type"],
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc: ""
      },
      cytoscapezoom: 100,
      activeMenu: -1,
      selectMenu: -1,
      yuanpanshow: -1
    };
  },
  watch: {
    cytoscapezoom(n, o) {
      console.log(n, o);

      cy.zoom(n / 100);
    }
  },
  mounted() {
    setTimeout(() => {
      this.init();
      cy.minZoom(0.5);
      cy.maxZoom(4);
      var png64 = cy.png();
      document.querySelector("#png-eg").setAttribute("src", png64);
    }, 200);
  },
  methods: {
    dialogAddSubmit() {
      if (
        this.dialogAddForm.name.length < 3 ||
        this.dialogAddForm.name.length > 10
      ) {
        alert(
          "长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符"
        );
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
      if (!reg.test(this.dialogAddForm.ip)) {
        alert(
          "只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255"
        );
        return false;
      }
      if (this.dialogAddForm.desc > 30) {
        alert("备注信息最大不超30个中文字符");
        return;
      }
    },
    mouseOver(index) {
      this.activeMenu = index;
    },
    mouseLeave() {
      this.activeMenu = -1;
    },
    init() {
      //0基本信息 1分析图表 2深度洞察 3趋势预测 4路径分析 5回溯列表 6告警 7用户体验   9KPI 10报表
      let commandsValue = [];
      //业务画像业务系统
      commandsValue.push([
        { name: "基本信息", value: 0 },
        { name: "告警預警", value: 6 },
        { name: "深度洞察", value: 2 },
        { name: "用户体验", value: 7 },
        { name: "业务路径", value: 4 },
        { name: "故障回溯", value: 5 },
        { name: "报表", value: 10 }
      ]);
      //业务画像 应用组件/主机
      commandsValue.push([
        { name: "基本信息", value: 0 },
        { name: "告警預警", value: 6 },
        { name: "KPI", value: 9 },
        { name: "深度洞察", value: 2 },
        { name: "故障回溯", value: 5 },
        { name: "趋势预测", value: 3 },
        { name: "报表", value: 10 }
      ]);
      //网络画像 交换机
      commandsValue.push([
        { name: "基本信息", value: 0 },
        { name: "告警預警", value: 6 },
        { name: "深度洞察", value: 2 },
        { name: "故障回溯", value: 5 }
      ]);
      //网络画像 子网
      commandsValue.push([
        { name: "基本信息", value: 0 },
        { name: "告警預警", value: 6 },
        { name: "深度洞察", value: 2 },
        { name: "回溯列表", value: 5 },
        { name: "KPI", value: 9 },
        { name: "趋势预测", value: 3 }
      ]);
      //网络画像 主机
      commandsValue.push([
        { name: "基本信息", value: 0 },
        { name: "KPI", value: 9 },
        { name: "告警預警", value: 6 }
      ]);

      let commandsCon = [];
      commandsValue.map(i => {
        let cv = [];
        i.map(iz => {
          cv.push({
            content:
              '<span class="cytoscape-icon cytoscape-icon-' +
              iz.value +
              '">' +
              '<img src="../../static/cytoscape' +
              iz.value +
              '.png" />' +
              "</span>",
            select: ele => {
              console.log(ele.id());

              this.$emit("cytoscapeclick", iz.value);
            }
          });
        });
        commandsCon.push(cv);
      });
      cy = this.$cytoscape({
        container: this.$refs.cytoscape,
        layout: {
          name: "breadthfirst",
          directed: true,
          padding: 10
        },
        boxSelectionEnabled: false,
        autounselectify: true,
        style: this.$cytoscape
          .stylesheet()
          .selector("node")
          .css({
            height: 30,
            width: 30,
            "background-fit": "cover",
            "background-color": "#fff",
            "border-color": "#fff",
            "border-width": 3,
            // "border-opacity": 0.5,
            "background-image": function(ele) {
              return "/static/" + ele.data("img") + "";
            }
          })
          .selector(".nodestyle1")
          .css({
            "background-fit": "cover",
            "background-color": "#779ED6",
            "border-color": "#779ED6",
          "border-width": 3
          })
          .selector(".nodestyle2")
          .css({
            "background-fit": "cover",
            "background-color": "#22AF9D",
            "border-color": "#22AF9D",
          "border-width": 3
          })
          .selector(".nodestyle3")
          .css({
            "background-fit": "cover",
            "background-color": "#E1684D",
            "border-color": "#E1684D",
          "border-width": 3
          })
          .selector("edge")
          .css({
            "curve-style": "",
            width: 3,
            "target-arrow-shape": "triangle",
            "line-color": "rgba(207, 207, 207, 1)",
            "target-arrow-color": "rgba(207, 207, 207, 1)"
          })
          .selector(".edgestyle1")
          .css({
            "curve-style": "",
            width: 3,
            "target-arrow-shape": "triangle",
            "line-color": "#E1684D",
            "target-arrow-color": "#E1684D"
          }), 
        elements: {
          nodes: [
            { data: { id: "cat", img: "co1.gif" } , classes: "nodestyle1"},
            { data: { id: "cat1", img: "co2.gif" } , classes: "nodestyle2"},
            { data: { id: "bird", img: "co3.gif" }, classes: "nodestyle3" },
            { data: { id: "ladybug", img: "co4.gif" }},
            { data: { id: "aphid", img: "co5.gif" } },
            { data: { id: "rose", img: "co6.gif" } },
            { data: { id: "grasshopper", img: "co7.gif" } },
            { data: { id: "plant", img: "co8.gif" } },
            { data: { id: "wheat", mg: "co9.gif" } },
            { data: { img: "co10.png" }, classes: "nodestyle1" }
          ],
          edges: [
            { data: { source: "cat", target: "bird" },classes:'edgestyle1'  },
            { data: { source: "bird", target: "ladybug" },classes:'edgestyle1' },
            { data: { source: "bird", target: "grasshopper" } },
            { data: { source: "grasshopper", target: "plant" } },
            { data: { source: "grasshopper", target: "wheat" } },
            { data: { source: "ladybug", target: "aphid" } },
            { data: { source: "aphid", target: "rose" } }
          ]
        }
      });
      cy.nodes().on("click", evt => {
        //type == 1  网络画像
        // 2. 子网画像（6项）: 基本信息，告警/预警，KPI，深度洞察，趋势预测，报表
        // type ==  2   业务画像
        //1.业务系统（7项）:基本信息，告警/预警，深度洞察，业务路径，用户体验，故障回溯，报表   yuanpanshow = 2
        //2.应用组件（7项）:基本信息，告警/预警，KPI，深度洞察，故障回溯，趋势预测，报表    yuanpanshow = 1
        // 3. 主机（7项）:基本信息，告警/预警，KPI，深度洞察，故障回溯，趋势预测，报表   yuanpanshow = 1
        if (this.type == "1") {
          if (evt.target.data().id == "cat") {
            this.yuanpanshow = 1;
          } else if (evt.target.data().id == "bird") {
            this.yuanpanshow = 4;
          } else if (evt.target.data().id == "ladybug") {
            this.yuanpanshow = 3;
          } else if (evt.target.data().id == "aphid") {
            this.yuanpanshow = 6;
          }
        } else if (this.type == "2") {
          if (evt.target.data().id == "cat") {
            this.yuanpanshow = 9;
          } else if (evt.target.data().id == "bird") {
            this.yuanpanshow = 2;
          } else if (evt.target.data().id == "ladybug") {
            this.yuanpanshow = 1;
          }
        }

        console.log(evt, evt.target.data());
      });
      cy.edges().on("click", evt => {
        console.log(evt);
      });
      // cy.cxtmenu({
      //   selector: 'node[class = "type1"]',
      //   fillColor: "#fff",
      //   activeFillColor: "#BBEEE9", // the colour used to indicate the selected command
      //   // activePadding: 10, // additional size in pixels for the active command
      //   itemColor: "white", // the colour of text in the command's content
      //   itemTextShadowColor: "#000", // the text shadow colour of the command's content
      //   commands: commandsCon[0]
      // });
      // cy.cxtmenu({
      //   selector: 'node[class = "type2"]',
      //   fillColor: "#fff",
      //   activeFillColor: "#BBEEE9", // the colour used to indicate the selected command
      //   // activePadding: 10, // additional size in pixels for the active command
      //   itemColor: "white", // the colour of text in the command's content
      //   itemTextShadowColor: "#000", // the text shadow colour of the command's content
      //   commands: commandsCon[1]
      // });
      // cy.cxtmenu({
      //   selector: 'node[class = "type3"]',
      //   fillColor: "#fff",
      //   activeFillColor: "#BBEEE9", // the colour used to indicate the selected command
      //   // activePadding: 10, // additional size in pixels for the active command
      //   itemColor: "white", // the colour of text in the command's content
      //   itemTextShadowColor: "#000", // the text shadow colour of the command's content
      //   commands: commandsCon[2]
      // });
      // cy.cxtmenu({
      //   selector: 'node[class = "type4"]',
      //   fillColor: "#fff",
      //   activeFillColor: "#BBEEE9", // the colour used to indicate the selected command
      //   // activePadding: 10, // additional size in pixels for the active command
      //   itemColor: "white", // the colour of text in the command's content
      //   itemTextShadowColor: "#000", // the text shadow colour of the command's content
      //   commands: commandsCon[3]
      // });
      // cy.cxtmenu({
      //   selector: 'node[class = "type5"]',
      //   fillColor: "#fff",
      //   activeFillColor: "#BBEEE9", // the colour used to indicate the selected command
      //   // activePadding: 10, // additional size in pixels for the active command
      //   itemColor: "white", // the colour of text in the command's content
      //   itemTextShadowColor: "#000", // the text shadow colour of the command's content
      //   commands: commandsCon[4]
      // });
    }
  }
};
</script>
 

<style lang="scss" scoped>
.yuanp,
.yuanp9,
.yuanp7,
.yuanp3,
.yuanp4,
.yuanp6 {
  position: absolute;
  width: 158px;
  height: 158px;
  background: url(../../assets/y9.png) no-repeat center center;
  background-size: 100% 100%;
  right: 50px;
  top: 30px;
  z-index: 999;
  > span {
    display: block;
    height: 30px;
    width: 30px;
    position: absolute;
    // background: #000;
    z-index: 9999;
  }
  &:before {
    content: "";
    display: block;
    width: 78px;
    height: 78px;
    background: url(../../assets/y1.png) no-repeat center center;
    background-size: 100% 100%;
    left: 40px;
    top: 40px;
    z-index: 9999;
    position: absolute;
  }
  h1 {
    content: "";
    display: block;
    width: 21px;
    height: 19px;
    background: url(../../assets/jiaohuanji.png) no-repeat center center;
    background-size: 100% 100%;
    left: 68px;
    top: 68px;
    z-index: 9999;
    position: absolute;
  }
}
.yuanp6 {
  background-image: url(../../assets/y6.png);
  > span {
    display: block;
    height: 40px;
    width: 40px;
    position: absolute;
    z-index: 9999;
    // background:#000;
    &:nth-child(1) {
      left: 55px;
      top: 11px;
    }
    &:nth-child(2) {
      left: 101px;
      top: 26px;
    }
    &:nth-child(3) {
      left: 107px;
      top: 77px;
    }
    &:nth-child(4) {
      left: 65px;
      top: 113px;
    }
    &:nth-child(5) {
      left: 11px;
      top: 95px;
    }
    &:nth-child(6) {
      left: 11px;
      top: 41px;
    }
  }
  > a {
    display: block;
    width: 67px;
    height: 80px;
    position: absolute;
    background: url(../../assets/rr0.png) no-repeat center center;
    background-size: 100% 100%;
    @for $i from 1 through 6 {
      &.icon6#{$i} {
        background-image: url(../../assets/y6#{$i}.png) !important;
      }
      &.icon6#{$i}.active {
        background-image: url(../../assets/y6#{$i}1.png) !important;
      }
    }
    &.icon61 {
      left: 29px;
      top: 0px;
      width: 81px;
      height: 81px;
    }
    &.icon62 {
      left: 78px;
      top: 4px;
      width: 80px;
      height: 75px;
    }
    &.icon63 {
      left: 78px;
      top: 67px;
      width: 80px;
      height: 75px;
    }
    &.icon64 {
      left: 49px;
      top: 78px;
      width: 80px;
      height: 80px;
    }
    &.icon65 {
      left: 1px;
      top: 78px;
      width: 80px;
      height: 75px;
    }
    &.icon66 {
      left: 1px;
      top: 15px;
      width: 80px;
      height: 76px;
    }
  }
}

.yuanp9 {
  background-image: url(../../assets/y9.png);
  > span {
    display: block;
    height: 30px;
    width: 30px;
    position: absolute;
    // background: #000;
    z-index: 9999;
    &:nth-child(1) {
      left: 44px;
      top: 8px;
    }
    &:nth-child(2) {
      left: 80px;
      top: 5px;
    }
    &:nth-child(3) {
      left: 115px;
      top: 39px;
    }
    &:nth-child(4) {
      left: 119px;
      top: 77px;
    }
    &:nth-child(5) {
      left: 105px;
      top: 111px;
    }
    &:nth-child(6) {
      left: 67px;
      top: 121px;
    }
    &:nth-child(7) {
      left: 31px;
      top: 106px;
    }
    &:nth-child(8) {
      left: 9px;
      top: 72px;
    }
    &:nth-child(9) {
      left: 9px;
      top: 36px;
    }
  }
  > a {
    display: block;
    width: 67px;
    height: 80px;
    position: absolute;
    background: url(../../assets/rr0.png) no-repeat center center;
    background-size: 100% 100%;
    @for $i from 1 through 9 {
      &.icon9#{$i} {
        background-image: url(../../assets/y9#{$i}1.png) !important;
      }
      &.icon9#{$i}.active {
        background-image: url(../../assets/y9#{$i}.png) !important;
      }
    }
    &.icon91 {
      left: 29px;
      top: -1px;
      width: 53px;
      height: 80px;
    }
    &.icon92 {
      left: 79px;
      top: 0px;
      width: 54px;
      height: 80px;
    }
    &.icon93 {
      left: 78px;
      top: 20px;
      width: 80px;
      height: 61px;
    }
    &.icon94 {
      left: 78px;
      top: 66px;
      width: 80px;
      height: 55px;
    }
    &.icon95 {
      left: 79px;
      top: 77px;
      width: 68px;
      height: 77px;
    }
    &.icon96 {
      left: 48px;
      top: 77px;
      width: 56px;
      height: 80px;
    }
    &.icon97 {
      left: 9px;
      top: 77px;
      width: 71px;
      height: 75px;
    }
    &.icon98 {
      left: 0px;
      top: 61px;
      width: 80px;
      height: 55px;
    }
    &.icon99 {
      left: 0px;
      top: 15px;
      width: 79px;
      height: 65px;
    }
  }
}

.yuanp4 {
  position: absolute;
  width: 158px;
  height: 158px;
  background: url(../../assets/y4.png) no-repeat center center;
  background-size: 100% 100%;
  right: 50px;
  top: 30px;
  z-index: 999;
  > span {
    display: block;
    height: 70px;
    width: 70px;
    position: absolute;
    // background: #000;
    z-index: 9999;
    &:nth-child(1) {
      left: 0px;
      top: 0px;
    }
    &:nth-child(2) {
      left: 80px;
      top: 5px;
    }
    &:nth-child(3) {
      right: 0px;
      bottom: 0px;
    }
    &:nth-child(4) {
      left: 0px;
      bottom: 0px;
    }
  }
  > a {
    display: block;
    width: 67px;
    height: 80px;
    position: absolute;
    background: url(../../assets/rr0.png) no-repeat center center;
    background-size: 100% 100%;
    @for $i from 1 through 4 {
      &.icon4#{$i} {
        background-image: url(../../assets/y4#{$i}1.png) !important;
      }
      &.icon4#{$i}.active {
        background-image: url(../../assets/y4#{$i}.png) !important;
      }
    }
    &.icon41 {
      left: 0px;
      top: 0px;
      width: 80px;
      height: 79px;
    }
    &.icon42 {
      top: 0px;
      right: -1px;
      width: 81px;
      height: 79px;
    }
    &.icon43 {
      top: 79px;
      right: -1px;

      width: 81px;
      height: 81px;
    }
    &.icon44 {
      top: 79px;
      right: 78px;
      width: 80px;
      height: 81px;
    }
  }
}
.yuanp3 {
  position: absolute;
  width: 158px;
  height: 158px;
  background: url(../../assets/y3.png) no-repeat center center;
  background-size: 100% 100%;
  right: 50px;
  top: 30px;
  z-index: 999;
  > span {
    display: block;
    height: 30px;
    width: 50px;
    position: absolute;
    z-index: 9999;
    // background:#000;
    &:nth-child(1) {
      left: 27px;
      top: 17px;
      height: 60px;
    }
    &:nth-child(2) {
      left: 103px;
      top: 24px;
      height: 100px;
    }
    &:nth-child(3) {
      left: 28px;
      top: 107px;
      height: 60px;
    }
  }
  > a {
    display: block;
    width: 67px;
    height: 80px;
    position: absolute;
    background: url(../../assets/rr0.png) no-repeat center center;
    background-size: 100% 100%;
    @for $i from 1 through 3 {
      &.icon3#{$i} {
        background-image: url(../../assets/y3#{$i}1.png) !important;
      }
      &.icon3#{$i}.active {
        background-image: url(../../assets/y3#{$i}.png) !important;
      }
    }
    &.icon31 {
      left: 0px;
      top: 0px;
      width: 116px;
      height: 86px;
    }
    &.icon32 {
      top: 8px;
      right: -1px;
      width: 80px;
      height: 139px;
    }
    &.icon33 {
      top: 79px;
      right: 33px;
      width: 125px;
      height: 80px;
    }
  }
}
.yuanp {
  position: absolute;
  width: 158px;
  height: 158px;
  background: url(../../assets/y2.png) no-repeat center center;
  background-size: 100% 100%;
  right: 50px;
  top: 30px;
  z-index: 999;
  > span {
    display: block;
    height: 30px;
    width: 30px;
    position: absolute;
    z-index: 9999;
    &:nth-child(1) {
      left: 51px;
      top: 9px;
    }
    &:nth-child(2) {
      left: 98px;
      top: 22px;
    }
    &:nth-child(3) {
      left: 117px;
      top: 64px;
    }
    &:nth-child(4) {
      left: 95px;
      top: 107px;
    }
    &:nth-child(5) {
      left: 55px;
      top: 113px;
    }
    &:nth-child(6) {
      left: 15px;
      top: 84px;
    }
    &:nth-child(7) {
      left: 15px;
      top: 39px;
    }
  }
  > a {
    display: block;
    width: 67px;
    height: 80px;
    position: absolute;
    background: url(../../assets/rr0.png) no-repeat center center;
    background-size: 100% 100%;

    @for $i from 0 through 12 {
      &.icon#{$i} {
        background-image: url(../../assets/r#{$i}.png) !important;
      }
      &.icon#{$i}.active {
        background-image: url(../../assets/rr#{$i}.png) !important;
      }
    }
    &.icon0 {
      left: 29px;
      top: 0px;
    }
    &.icon1 {
      top: 27px;
      right: 34px;
    }
    &.icon2 {
      top: 42px;
      right: 1px;
      width: 81px;
      height: 73px;
    }
    &.icon10 {
      top: 15px;
      right: 78px;
      width: 80px;
      height: 64px;
    }
    &.icon4 {
      top: 77px;
      right: 77px;
      width: 80px;
      height: 64px;
    }
    &.icon5 {
      top: 76px;
      left: 77px;
      width: 74px;
      height: 81px;
    }
    &.icon6 {
      width: 73px;
      height: 79px;
      top: 2px;
      left: 78px;
    }
    &.icon7 {
      width: 73px;
      height: 79px;
      top: 79px;
      left: 26px;
    }
  }
}

.portrait-cytoscape,
.cytoscape {
  width: 100%;
  height: 100%;
}

.portrait-cytoscape {
  .cytoscape {
    width: 100%;
    height: 100%;
  }
  .slider {
    position: absolute;
    right: 10px;
    top: 20px;
  }
  .pngview {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    img {
      width: 134px;
      height: 87px;
    }
  }
}
</style>
